

<!--不使用脚手架生成 浏览器引入一个 使用Vue3 、ElementPlus 、axios、antd 的 单页面项目-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue Project</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入 Element Plus 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入 antd 样式 -->
    <!-- 引入antd的CSS文件 -->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd/dist/antd.css">-->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.4.0/antd.min.css">-->
</head>

<body>
<div id="app">
    <h1>欢迎来到我的单页面应用</h1>
    <button @click="fetchData">获取数据</button>
    <p v-if="data">{{ data }}</p>
    <el-button @click="initForm">Element Plus 按钮</el-button>
    <antd-button>Antd 按钮</antd-button>
</div>

<!-- 引入ElementPlus的JavaScript文件 -->
<script src="https://unpkg.com/element-plus"></script>
<!-- 引入axios的JavaScript文件 -->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!-- 引入antd的JavaScript文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/antd@next"></script>-->
<script src="https://docker.jmwebseo.cn/vue/vuestudy/single_page/tang/js/axios.min.js"></script>
<script src="https://docker.jmwebseo.cn/vue/vuestudy/single_page/tang/js/qs.js"></script>
<script>
    // 引入 axios
    // const axios = require('axios');
    const { createApp } = Vue;
    const App = {
        data() {
            return {
                data: null
            };
        },
        methods: {
            async fetchData() {
                try {
                    const response = await axios.get('http://127.0.0.1:8000/api/contracts');
                    this.data = response.data;
                } catch (error) {
                    console.error(error);
                }
            },
            initForm() {
                axios({
                    method: 'post',
                    url: 'http://app.tangchinese.org/api-app-data/?module=post&action=r_post_by_customize&platform=app',
                    data: Qs.stringify({
                        type: this.type,
                        user_id: this.user_id
                    })
                })
                    .then(function (response) {
                        console.log(response);
                        let data = response.data
                        if (data.rc === 0) {
                            // alert(data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        }
    };
    const app = createApp(App);
    app.use(ElementPlus);
    // app.use(antd);
    app.mount('#app');
</script>
</body>

</html>